<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>htmlcss 阶段</title>
    <style>
        body {
            margin: 0;
        }

        .wrap {
            width: 600px;
            margin: 0 auto;
            background-color: #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 50px 20px;
        }

        .wrap .left {
            display: flex;
        }

        .wrap .left>div {
            margin: 0 20px;
        }

        .wrap .left>div span {
            display: block;
        }

        .wrap .right img {
            width: 80px;
        }
    </style>
</head>

<body>

    <!-- <div class="wrap">
        <div class="left">
            <div>27°C</div>
            <div>
                <span>广州</span>
                <span>中雨 空气质量 优</span>
            </div>
        </div>
        <div class="right">
            <img src="./img/中雨.png" alt="">
        </div>
    </div> -->

    <script src="./数据.js"></script>
    <script>

        // 要求：
        // 根据参数获取不同城市的天气数据, 把获取的天气数据渲染在页面上
        // 构造函数名称:  Weather
        // 属性： data (数据) currentWeather（当前城市的数据，初始化为null）
        // 方法：
        //  getWeather  根据参数调用该方法，比如，城市名或者id名，可以获取城市数据
        //  render      调用该方法渲染数据

        // 例如：
        // var w1 = new Weather();
        // var cur = w1.getWeather("广州");// 获取输入1
        // console.log(cur);// {tem: "27°C", city: "广州", id: 1, wea: "中雨", air: "空气质量 优", …}
        // w1.render();// 渲染数据在页面，如图所示

        function Weather() {
            this.data_1 = data;
        }

        Weather.prototype.getWeather = function (city) {
            var shuju = "";
            for (var i = 0; i < this.data_1.length; i++) {
                if (city == this.data_1[i].city) {
                    console.log("id=" + this.data_1[i].id);
                    shuju = this.data_1[i];
                }
            }
            return shuju;
        }

        Weather.prototype.currenTweather = function (city) {
            var shuju_1 = "";
            for (var i = 0; i < this.data_1.length; i++) {
                if (city == this.data_1[i].city) {
                    var str = "";
                    str += '<div class="wrap">'
                    str += '    <div class="left">'
                    str += '        <div>'+this.data_1[i].tem+'</div>'
                    str += '        <div>'
                    str += '            <span>' +this.data_1[i].city+ '</span>'
                    str += '            <span>'+this.data_1[i].wea+this.data_1[i].air+'</span>'
                    str += '        </div>'
                    str += '    </div>'
                    str += '    <div class="right">'
                    str += '        <img src="./img/'+this.data_1[i].wea+'.png" alt="">'
                    str += '    </div>'
                    str += '</div>'
                }
            }
            document.write(str);
        }

        var w1 = new Weather();
        var cur = w1.getWeather("上海");
        console.log(cur);
        var res = w1.currenTweather("上海");
        // console.log(res);


    </script>
</body>

</html>